<template>
  <div style="padding: 22px 10px 10px">
    <h4 class="usermtitle">用户管理</h4>

    <div>
      <div class="userm">
        <div
          style="
            height: auto;
            display: flex;
            box-shadow: 0px 0px 15px -10px gray;
            margin-top: 10px;
          "
          v-for="user in userList.list"
          :key="user.id"
        >
          <div class="usersPhoto">
            <a-image :width="50" :src="'/api/assets/avatar/' + user.avatar" />
          </div>

          <div class="usersInfo">
            <li class="usersName">
              <span>{{ user.num }}</span>
            </li>
            <li class="usersBiog">
              注册时间：<span>{{ user.reg }}</span>
            </li>
          </div>

          <div class="usersInfo-state">
            <li class="usersName">
              用户状态：<span>{{ user.state }}</span>
            </li>
            <li class="usersBiog">
              最近一次登陆时间：<span>{{ user.stime }}</span>
            </li>
          </div>

          <div class="usersButton">
            <a-dropdown>
              <template #overlay>
                <a-menu @click="handleClick">
                  <a-menu-item key="1"> 封禁/解禁 </a-menu-item>
                  <a-menu-item key="2">查看角色</a-menu-item>
                </a-menu>
              </template>
              <a-button>
                操作
                <DownOutlined />
              </a-button>
            </a-dropdown>
          </div>
        </div>

        <!--分页栏-->
        <div class="pagination">
          <a-pagination @change="fetchUserList" v-model:current="query.pageNum" :total="totalusers" :defaultPageSize="query.pageSize" show-less-items />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, ref } from "vue";
import { get } from "@/common";
export default {
  data() {
    const query = reactive({
      pageNum: 1,
      pageSize: 4,
      order_by: "id",
      sort: "desc",
    });
    const userList = reactive({
      list: [],
    });
    const totalusers = reactive({}); 
    return {
      query,
      userList,
      totalusers
    };
  },
  methods: {
    fetchUserList() {
      get("/admin/user/list", this.query).then((res) => {
        this.userList = res.data;
        this.totalusers = res.data.total;
        console.log("获取用户列表成功");
      });
    },
    handleClick(menuInfo) {
      console.log("click ", menuInfo);
    },
  },

  setup() {
    return {
    };
  },
  mounted() {
    this.fetchUserList();
  },
};
</script>

<style>
.usermtitle {
  font-size: 22px;
  border-left: 3px solid rgba(0, 0, 0, 0.8);
  padding-left: 8px;
  line-height: 16px;
  margin-bottom: 15px;
  font-weight: normal;
  margin-top: 10px;
  text-align: left;
}

.userm {
  padding: 10px 10px 10px;
}

.usersPhoto {
  width: 100px;
  height: 100px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tag {
  height: 40px;
}

.usersInfo {
  width: 300px;
  height: 100px;
  padding: 4px;
  list-style-type: none;
  padding: 22px 10px 10px;
}

.usersInfo-state {
  width: 500px;
  height: 100px;
  padding: 4px;
  list-style-type: none;
  padding: 22px 10px 10px;
}

.usersName {
  color: #000;
  font-size: 14px;
  font-weight: normal;
  margin-right: -2px;
  overflow: hidden;
  vertical-align: -2px;
}

.usersBiog {
  color: #000;
  font-size: 14px;
  margin-top: 10px;
  line-height: 18px;
}

.usersButton {
  display: flex;
  align-items: center;
  padding: 10px 0px 10px;
  margin-right: 15px;
}

.pagination {
  padding: 20px 0px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>